{"componentChunkName":"component---src-templates-tags-js","path":"/tags/multilingual/","result":{"data":{"site":{"siteMetadata":{"title":"Aleks Popovic - personal website and blog"}},"allMarkdownRemark":{"totalCount":3,"edges":[{"node":{"excerpt":"Having different page files for different languages makes all of the page translations pretty contained and easy for access if something…","fields":{"slug":"/Translating-React-components/"},"frontmatter":{"date":"August 16, 2020","title":"Translating React components","series":"How to Build a Multilingual Website with Gatsby and React","description":"Having different page files for different languages makes all of the page translations pretty contained and easy for access if something needs to be changed or added later on. Separating page components is good because of searching algorithms and SEO. There is also no code duplication, since page components are mostly plain text or markdown. Non-page components are a bit different.","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACQklEQVQozw2RW08SAACF+R0t7yKooaKSkSAqchW5CQgIgsgM8IIaK4TUNKWJMzU1ms6czK0tVy43W8tcbulDzhcfWm+99EO+eDpPZ+c75wgMdTosuijG4nr0zRZsHQFc7RGWw1lW++d5vXxE1veYNbWdV0o9wQYd/upGonUqRlU+RhRefHI3ZpECi7gDgUVqxqkdxmWMMLv4lqXwHC65l6Q2SCp2QMS/RVoX5LpPw6LGga3ZzLKqhzO3nYQxxoJvlZA6hq8thOtBAIGzvhOjzIE1fULf2hVjg5v01Xbi90wS3b9lZPsHU29O2MrmGZ3Zw7vxjUT+mq13FzyL75PxzBNVeQqUVqyFhgJTUTnd5U1UGHI0zVyiXvmFrlZNWD+E//kHBjJfiGc+sbJxSmb1ivjcGaHdG5zhHEl7mh3HE8YVfQxKtfRUyhA4Su4SksiQOvcxb97SMvcTtbAVrzVCYPs7wdw5AxuXTL2/5Wn+N0O5K2KZz4z7U8QbtcxYIkyp7OxE13C0PUIw3SBkQd5IjW2Xmugx7YU9usqkeIfmCb88J7Lzl0DigED6mInNG17s/SGZOiIfzJC6r0Ens2EtHLs+uc6IdgzBsCaMvsVGm8SEQSzHXiLEIGzGKVFgqmiip6YDa/k9LKUSTKJWsp4kp6FZvjpmmegaR1MmQ1elQCdSEnpgQ+B+aMM/mMEsUWK4U1rQdtxVUvqr6/EKxViKyxkQ1eKuFNNdVIW2ELLkTvDv4wWH04f4ZL3oCx6tWElvk5H/neVWa8MEErkAAAAASUVORK5CYII=","aspectRatio":2.6666666666666665,"src":"/static/23e2c2b486f8733000f90e001c759f59/bc8e0/translating.png","srcSet":"/static/23e2c2b486f8733000f90e001c759f59/8ac63/translating.png 200w,\n/static/23e2c2b486f8733000f90e001c759f59/3891b/translating.png 400w,\n/static/23e2c2b486f8733000f90e001c759f59/bc8e0/translating.png 800w,\n/static/23e2c2b486f8733000f90e001c759f59/6050d/translating.png 1200w,\n/static/23e2c2b486f8733000f90e001c759f59/00405/translating.png 1600w,\n/static/23e2c2b486f8733000f90e001c759f59/0e6e2/translating.png 1920w","srcWebp":"/static/23e2c2b486f8733000f90e001c759f59/ccdb5/translating.webp","srcSetWebp":"/static/23e2c2b486f8733000f90e001c759f59/6b183/translating.webp 200w,\n/static/23e2c2b486f8733000f90e001c759f59/fc32b/translating.webp 400w,\n/static/23e2c2b486f8733000f90e001c759f59/ccdb5/translating.webp 800w,\n/static/23e2c2b486f8733000f90e001c759f59/9000d/translating.webp 1200w,\n/static/23e2c2b486f8733000f90e001c759f59/e0075/translating.webp 1600w,\n/static/23e2c2b486f8733000f90e001c759f59/30cf3/translating.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"You have all of your multilingual pages set up, but now you need to give your users a way to access those pages. There are multiple ways…","fields":{"slug":"/Building-a-language-switch-component-in-React/"},"frontmatter":{"date":"August 14, 2020","title":"Building a language switch component in React","series":"How to Build a Multilingual Website with Gatsby and React","description":"You have all of your multilingual pages set up, but now you need to give your users a way to access those pages. There are multiple ways this can be done. The most common solution is adding a language selection tool in the form of multiple links or by using a drop-down list. In my case - I had to implement three different languages, so I went with the buttons approach.","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACIUlEQVQozw2SWW8ScRTF+YK+qYm1Mamp1AfTVrtYrXYz2h0oLdKBsHegsk2GMsAMLVuBsnSAUoj2TV/8Cj7+/D+c3Htzck9uzj2WG3WDenqdjvKRZmabjnFMvxJmfH3GfTWMWQrRLwUwDYmu7sMsSPw2Ff70NEb1EKbupn8lcSP4ataBpaVs0cgd0c4dc1cKCjLCqCJzX/FxXw4KUZmuEaZthKhpEkrggHFZ4ud1kErWRyXtoKLsUM85aV7sYummvtFK71NNukmrMWwZAykeoBaQiMzKSM/TAlF801FOJuM4Xzrp5L/S15bpqIt0MmtidtDKuWgkV7HIPwLYlTyL+pDXFyXmVZUnUgp1z0/0jUzoVQxpUiYy40Z6KuOf36Cq7jPUdmknVmlE52idT1OOrpAPH2FZy9X5MPqHtfGXOa2GI5sgroe5CgfxvFAJTkUIWCN4pqLk7SvEXbOUEk7GlzbGxR3M1DqX3rcU/Uu0k1+wnKtJNhWDaMLLteZhoDv5pW9RPHERsoZRV13EF06JWXe5dE+QPHpGP3vAoHjKoGBjmF3iNj4vrpyjJ09gGRhehkaAOz0ifPBTK/hpaG5h8DHtvI1m4bvoxRdTm+j+GSKHVm7VzzyUt0XdY5haEN4tc+N/TN37CEtTOxGLpyIeZwwE2kK0a3jo6Q5uM5uYmU/UlEPKiT2M0DKyfZpe+j0PIl69vJ1xYYeR8o5B+DFmbIb/fcrZLzxbYNUAAAAASUVORK5CYII=","aspectRatio":2.6666666666666665,"src":"/static/b4540dc780b9271335e7b48d0014a453/bc8e0/switch.png","srcSet":"/static/b4540dc780b9271335e7b48d0014a453/8ac63/switch.png 200w,\n/static/b4540dc780b9271335e7b48d0014a453/3891b/switch.png 400w,\n/static/b4540dc780b9271335e7b48d0014a453/bc8e0/switch.png 800w,\n/static/b4540dc780b9271335e7b48d0014a453/6050d/switch.png 1200w,\n/static/b4540dc780b9271335e7b48d0014a453/00405/switch.png 1600w,\n/static/b4540dc780b9271335e7b48d0014a453/0e6e2/switch.png 1920w","srcWebp":"/static/b4540dc780b9271335e7b48d0014a453/ccdb5/switch.webp","srcSetWebp":"/static/b4540dc780b9271335e7b48d0014a453/6b183/switch.webp 200w,\n/static/b4540dc780b9271335e7b48d0014a453/fc32b/switch.webp 400w,\n/static/b4540dc780b9271335e7b48d0014a453/ccdb5/switch.webp 800w,\n/static/b4540dc780b9271335e7b48d0014a453/9000d/switch.webp 1200w,\n/static/b4540dc780b9271335e7b48d0014a453/e0075/switch.webp 1600w,\n/static/b4540dc780b9271335e7b48d0014a453/30cf3/switch.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}},{"node":{"excerpt":"Before going ahead and making a multilingual website I would advise you to think about a few things: Do you even need one? Are you prepared…","fields":{"slug":"/Setting-up-page-structure-for-a-multilingual-website-in-Gatsby-and-React/"},"frontmatter":{"date":"August 05, 2020","title":"Setting up page structure for a multilingual website","series":"How to Build a Multilingual Website with Gatsby and React","description":"Before going ahead and making a multilingual website I would advise you to think about a few things. Do you even need one? Are you prepared to make multilingual content on your own? What is the best way to handle various translations? The first two points really matter only if you are making a personal project. If you were contracted to make a multilingual site for someone else then they are the ones who need to think about it.","featuredImage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACQklEQVQozx2S20/SYRjH+T+8aqv7buqmtWVunTbrQi0tEeWMCESgKSAnQdkPEVOzw4aWHW1WNoepLduymjmjUkRFREytbHNrXrSu+vTK1bNne9/n+Xw/7yvrNG1x07xDuzdFk3eSgGKJkDZLSL1MSJNG0n/DfPoNZQcfYjrzlqBmDV9NmlbVCr7KOXQnX+OSpwiIvql8FllP3RbdzmVs01GcmXac1+J0KTfxVC/Qpk7TUDLDqX0dFBVIFBaEsZckCKoX8VenaNFkaZbP0aJeFWczNJ6fQRbRruGtn8aRDGPbCBO76+Nvo4fbign6PZNsDRqYdBm5Z7EzbDUze93G+oCLdMzDQiyIpE7iUYgFNYs0lieQ+ZUZgTyP6c5TGiL32enogHgXc8ZOHrsnWIqoGKs3EdPZGbHWkZBMzHf7SPU08SXqI2IQcdW5fGS/KoNM0ueIGL/TZ0mSaa7iT5uczatexrSDPHLFxSUdU5KRuMPCVKuS544oDRUZHJeW8AqykHY17zUgYge1OWRd5g1Chl1Gnb3w7DD/hot44XiAU7HLE/cIize8jDfaGDJfZshopd/Sh774K7Vn34vBSQKaHD7liqhruOVJ4bB2HcmwTd+VD/zuPURGKhWvnhCSswSFDqlqDv/xAdT7JcoO3EJe9IqLR19y4cgIteemcQuyPW2tunXspR/3CH/Sadqm27zJgO0d0bpfhA0/COvFIl0Wqfoz7RXvaCkexXpiFI34OpXHxqkpHMNa+ilP5let5qtLscx/wqWxW+oo+ccAAAAASUVORK5CYII=","aspectRatio":2.6666666666666665,"src":"/static/62314cdf6f6a00bf234dd2a5e569228a/bc8e0/structure.png","srcSet":"/static/62314cdf6f6a00bf234dd2a5e569228a/8ac63/structure.png 200w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/3891b/structure.png 400w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/bc8e0/structure.png 800w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/6050d/structure.png 1200w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/00405/structure.png 1600w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/0e6e2/structure.png 1920w","srcWebp":"/static/62314cdf6f6a00bf234dd2a5e569228a/ccdb5/structure.webp","srcSetWebp":"/static/62314cdf6f6a00bf234dd2a5e569228a/6b183/structure.webp 200w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/fc32b/structure.webp 400w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/ccdb5/structure.webp 800w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/9000d/structure.webp 1200w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/e0075/structure.webp 1600w,\n/static/62314cdf6f6a00bf234dd2a5e569228a/30cf3/structure.webp 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}}}}]}},"pageContext":{"tag":"multilingual"}}}